import editorStyle from "../util/defaultStyle";

const taskDefaultOptions = {
    icon: null,
    iconStyle: {
        width: 12,
        height: 12,
        left: 2,
        top: 2,
    },
    style: {
        ...editorStyle.nodeStyle,
        fill: '#E7F7FE',
        stroke: '#1890FF',
        cursor: 'default',
    },
    stateStyles: {
        selected: {
            fill: '#95D6FB',
        },
        hover: {
            cursor: editorStyle.cursor.hoverNode,
        }
    }
};


const startDefaultOptions = {
    icon: null,
    iconStyle: {
        width: 18,
        height: 18,
        left: 6,
        top: 6,
    },
    style: {
        ...editorStyle.nodeStyle,
        fill: '#FEF7E8',
        stroke: '#FA8C16',
        cursor: 'default',
    },
    stateStyles: {
        selected: {
            fill: '#FCD49A',
        },
        hover: {
            cursor: editorStyle.cursor.hoverNode,
        }
    }
};

const endDefaultOptions = {
    icon: null,
    iconStyle: {
        width: 18,
        height: 18,
        left: 6,
        top: 6,
    },
    style: {
        ...editorStyle.nodeStyle,
        fill: '#EFF7E8',
        stroke: '#F5222D',
        cursor: 'default',
    },
    stateStyles: {
        selected: {
            fill: '#CFD49A',
        },
        hover: {
            cursor: editorStyle.cursor.hoverNode,
        }
    }
};

const departCommonDefaultOptions = {
    icons: [
        {
            iconUrl: require('../assets/icon_desc.svg'),
            iconStyle: {
                width: 10,
                height: 10,
                left: 4,
                top: 2,
            },
        },
        {
            iconUrl: require('../assets/icon_dept.svg'),
            iconStyle: {
                width: 10,
                height: 10,
                left: 4,
                top: 14,
            },
        },
        {
            iconUrl: require('../assets/icon_person.svg'),
            iconStyle: {
                width: 10,
                height: 10,
                left: 4,
                top: 26,
            },
        },
    ],
    labels: [
        {
            index: 'desc',
            label: '描述：',
            textStyle: {
                width: 10,
                height: 10,
                left: 20,
                top: 4.5,
            },
        },
        {
            index: 'dept',
            label: '部门：',
            textStyle: {
                width: 10,
                height: 10,
                left: 20,
                top: 16.5,
            },
        },
        {
            index: 'person',
            label: '负责人：',
            textStyle: {
                width: 10,
                height: 10,
                left: 20,
                top: 28,
            },
        },
    ],
    style: {
        ...editorStyle.departStartNodeStyle,
        cursor: 'default',

    },
    stateStyles: {
        selected: {
            fill: '#FCD49A',
        },
        hover: {
            cursor: editorStyle.cursor.hoverNode,
        },
        empty: {
            fill: '#FFFF00',
        },
    }
};

export default function (G6) {
    G6.registerNode('start-node', {
        shapeType: 'circle',
        labelPosition: 'bottom',
        options: {
            ...startDefaultOptions
        },
        getShapeStyle(cfg) {
            cfg.size = [40, 40];
            const width = cfg.size[0];
            const style = {
                x: 0,
                y: 0,
                r: width / 2,
                ...this.options.style,
            };
            if (Object.prototype.hasOwnProperty.call(cfg, 'color')) {
                style.fill = cfg.color
            }
            return style;
        },
        afterDraw(cfg, group) {
            if (cfg.active) {
                const shape = group.get('children')[0];
                shape.animate({
                    repeat: true,
                    onFrame(ratio) {
                        const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;
                        let radius = cfg.size;
                        if (isNaN(radius)) radius = radius[0];
                        return {
                            r: radius / 2 + diff
                        }
                    }
                }, 3000, 'easeCubic');
            }
            group.icon = group.addShape('path', {
                attrs: {
                    path: [
                        ['M', -4, -6],
                        ['L', 6, 0],
                        ['L', -4, 6],
                        ['Z'] // close
                    ],
                    fill: this.options.style.stroke,
                    stroke: this.options.style.stroke,
                }
            });
        },
        getAnchorPoints() {
            return [
                [0.5, 0], // top
                [1, 0.5], // right
                [0.5, 1], // bottom
            ]
        }
    }, 'base-node');
    G6.registerNode('end-node', {
        shapeType: 'circle',
        labelPosition: 'bottom',
        options: {
            ...endDefaultOptions
        },
        getShapeStyle(cfg) {
            cfg.size = [40, 40];
            const width = cfg.size[0];
            const style = {
                x: 0,
                y: 0,
                r: width / 2,
                ...this.options.style,
            };
            if (Object.prototype.hasOwnProperty.call(cfg, 'color')) {
                style.fill = cfg.color
            }
            return style;
        },
        afterDraw(cfg, group) {
            if (cfg.active) {
                console.info()
            }
            group.icon = group.addShape('path', {
                attrs: {
                    path: [
                        ['M', -4, -4],
                        ['L', 4, -4],
                        ['L', 4, 4],
                        ['L', -4, 4],
                        ['Z'] // close
                    ],
                    fill: this.options.style.stroke,
                    stroke: this.options.style.stroke,
                }
            });
        },
        getAnchorPoints() {
            return [
                [0.5, 0], // top
                [1, 0.5], // right
                [0.5, 1], // bottom
                [0, 0.5], // left
            ]
        }
    }, 'base-node');
    G6.registerNode('task-node', {
        shapeType: 'rect',
        options: {
            ...taskDefaultOptions
        },
        getShapeStyle(cfg) {
            cfg.size = [80, 44];
            const width = cfg.size[0];
            const height = cfg.size[1];
            const style = {
                x: 0 - width / 2,
                y: 0 - height / 2,
                width,
                height,
                ...this.options.style,
            };
            return style;
        }
    }, 'base-node');
    G6.registerNode('ope-node', {
        options: G6.Util.deepMix({}, taskDefaultOptions, {
            icon: require('../assets/icon_eq.svg'),
            style: {
                fill: '#E7F7FE',
                stroke: '#1890FF',
            },
            stateStyles: {
                selected: {
                    fill: '#95D6FB',
                },
                marked: {
                    fill: '#97fba8',
                }
            }
        }),
    }, 'task-node');

    G6.registerNode('path-node', {
        options: G6.Util.deepMix({}, taskDefaultOptions, {
            icon: require('../assets/icon_path.svg'),
            style: {
                fill: '#ffa11e',
                stroke: '#1890FF',
            },
            stateStyles: {
                selected: {
                    fill: '#0bfb8d',
                },
                marked: {
                    fill: '#97fba8',
                }
            }
        }),
    }, 'task-node');

    G6.registerNode('group-node', {
        options: G6.Util.deepMix({}, taskDefaultOptions, {
            icon: require('../assets/icon_group.svg'),
            style: {
                fill: '#E7F7FE',
                stroke: '#1890FF',
            },
            stateStyles: {
                selected: {
                    fill: '#95D6FB',
                },
                marked: {
                    fill: '#97fba8',
                }
            }
        }),
    }, 'task-node');

    G6.registerNode('depart-common-node', {
        shapeType: 'rect',
        options: {
            ...departCommonDefaultOptions,

        },
        getShapeStyle(cfg) {
            cfg.size = [115, 38];
            const width = cfg.size[0];
            const height = cfg.size[1];
            const style = {
                x: 0 - width / 2,
                y: 0 - height / 2,
                width,
                height,
                ...this.options.style,
            };
            return style;
        }
    }, 'task-node');

}
